<template>
  <div class="home">
    <div class="page-header">
      <h1>微前端主应用首页</h1>
      <div class="env-info">
        <el-tag :type="envTagType" size="large">
          {{ qiankunInfo.appType.toUpperCase() }} 应用
        </el-tag>
      </div>
    </div>

    <!-- 环境信息卡片 -->
    <el-card class="info-card" header="环境信息">
      <div class="info-grid">
        <div class="info-item">
          <strong>应用类型:</strong>
          <el-tag :type="envTagType">{{ qiankunInfo.appType }}</el-tag>
        </div>
        <div class="info-item">
          <strong>是否主应用:</strong>
          <el-tag :type="qiankunInfo.isMainApp ? 'success' : 'info'">
            {{ qiankunInfo.isMainApp ? '是' : '否' }}
          </el-tag>
        </div>
        <div class="info-item">
          <strong>是否子应用:</strong>
          <el-tag :type="qiankunInfo.isSubApp ? 'success' : 'info'">
            {{ qiankunInfo.isSubApp ? '是' : '否' }}
          </el-tag>
        </div>
        <div class="info-item">
          <strong>是否独立运行:</strong>
          <el-tag :type="qiankunInfo.isStandalone ? 'warning' : 'info'">
            {{ qiankunInfo.isStandalone ? '是' : '否' }}
          </el-tag>
        </div>
        <div class="info-item" v-if="qiankunInfo.subAppName">
          <strong>子应用名称:</strong>
          <el-tag type="primary">{{ qiankunInfo.subAppName }}</el-tag>
        </div>
      </div>
    </el-card>

    <!-- 全局状态管理 -->
    <el-card class="info-card" header="全局状态管理" v-if="qiankunInfo.isMainApp">
      <div class="action-buttons">
        <el-button type="primary" @click="updateUser">更新用户信息</el-button>
        <el-button type="success" @click="switchTheme">切换主题</el-button>
        <el-button type="info" @click="sendTestNotification">发送通知</el-button>
        <el-button type="warning" @click="updateSharedData">更新共享数据</el-button>
      </div>

      <!-- 当前全局状态显示 -->
      <div class="state-display" v-if="globalState">
        <h4>当前全局状态:</h4>
        <pre>{{ JSON.stringify(globalState, null, 2) }}</pre>
      </div>
    </el-card>

    <!-- 子应用导航 -->
    <el-card class="info-card" header="子应用导航" v-if="qiankunInfo.isMainApp">
      <div class="nav-buttons">
        <el-button type="primary" @click="navigateToSubApp1">
          <el-icon><Document /></el-icon>
          前往子应用1
        </el-button>
        <el-button type="success" @click="navigateToSubApp2">
          <el-icon><Menu /></el-icon>
          前往子应用2
        </el-button>
      </div>
    </el-card>

    <!-- 调试信息 -->
    <el-card class="info-card" header="调试信息" v-if="isDev">
      <div class="debug-info">
        <h4>qiankun 调试信息:</h4>
        <pre>{{ JSON.stringify(qiankunInfo.debugInfo, null, 2) }}</pre>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Document, Menu } from '@element-plus/icons-vue'
import { useQiankun } from '@/utils/qiankun'

// 使用 qiankun 工具类
const qiankunInfo = useQiankun()

// 开发环境标识
const isDev = import.meta.env.DEV

// 环境标签类型
const envTagType = computed(() => {
  switch (qiankunInfo.appType) {
    case 'main': return 'primary'
    case 'sub': return 'success'
    case 'standalone': return 'warning'
    default: return 'info'
  }
})

// 响应式数据
const globalState = ref(null)
const userInfo = ref({
  name: '测试用户',
  role: 'admin'
})

// 获取全局状态
const getGlobalState = () => {
  if (qiankunInfo.mainAppData) {
    globalState.value = qiankunInfo.mainAppData.getState()
  }
}

// 设置用户信息
const setUserInfo = () => {
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.setUser(userInfo.value)
    console.log('用户信息已设置:', userInfo.value)
    getGlobalState()
  }
}

// 发送通知
const sendNotification = () => {
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.sendNotification({
      id: Date.now(),
      type: 'info',
      title: '测试通知',
      message: '这是一条来自主应用的测试通知',
      timestamp: new Date().toLocaleString()
    })
    console.log('通知已发送')
    getGlobalState()
  }
}

// 更新共享数据
const updateSharedData = () => {
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.updateSharedData({
      currentProject: '微前端项目',
      lastUpdate: new Date().toLocaleString()
    })
    console.log('共享数据已更新')
    getGlobalState()
  }
}

// 操作函数
const updateUser = () => {
  setUserInfo()
  ElMessage.success('用户信息已更新')
}

const switchTheme = () => {
  const currentTheme = globalState.value?.theme || 'light'
  const newTheme = currentTheme === 'light' ? 'dark' : 'light'
  
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.setTheme(newTheme)
    ElMessage.success(`主题已切换为: ${newTheme}`)
    getGlobalState()
  }
}

const sendTestNotification = () => {
  sendNotification()
  ElMessage.success('通知已发送')
}

const navigateToSubApp1 = () => {
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.navigateToSubApp('sub-app1')
  }
}

const navigateToSubApp2 = () => {
  if (qiankunInfo.mainAppData) {
    qiankunInfo.mainAppData.navigateToSubApp('sub-app2')
  }
}

// 组件挂载时的处理
onMounted(() => {
  console.log('qiankun 环境信息:', qiankunInfo)
  getGlobalState()
  
  // 如果是开发环境，启用调试模式
  if (isDev) {
    import('@/utils/qiankun').then(({ enableDebugMode }) => {
      enableDebugMode()
    })
  }
})
</script>

<style scoped>
.home {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.env-info {
  display: flex;
  align-items: center;
}

.info-card {
  margin-bottom: 20px;
}

.info-grid {
  display: flex;
  flex-wrap: wrap;
}

.info-item {
  width: 50%;
  margin-bottom: 10px;
}

.info-item strong {
  font-weight: bold;
}

.action-buttons {
  margin-bottom: 20px;
}

.action-buttons .el-button {
  margin: 5px;
}

.state-display {
  margin-bottom: 20px;
}

.state-display h4 {
  margin-bottom: 10px;
}

.state-display pre {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.nav-buttons {
  margin-top: 20px;
}

.nav-buttons .el-button {
  margin: 5px;
}

.debug-info {
  margin-top: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.debug-info h4 {
  margin-bottom: 10px;
}

.debug-info pre {
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}
</style> 